<template>
	<view class="stock">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				缺货明细
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="con">
				<view class="title">{{info.name}}</view>
				<view class="desc">商户名称：{{info.charger_bussiness_name!=null?info.charger_bussiness_name:''}}</view>
				<view class="list clearfix">
					<view class="left fl clearfix">
						<view class="zuo fl">
							<image :src="baseUrl + '/wximage/img/stockshebei.png'"></image>
						</view>
						<view class="you fl">
							<view class="top">售货设备(台)</view>
							<view class="bottom">{{info.chargercount}}</view>
						</view>
					</view>
					<view class="right fl clearfix">
						<view class="zuo fl">
							<image :src="baseUrl + '/wximage/img/stockshuliang.png'"></image>
						</view>
						<view class="you fl">
							<view class="top">缺货商品数量(个)</view>
							<view class="bottom">{{info.goodscount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="biaoti">缺货商品</view>
			<view class="goodslist" v-if="list.length != 0">
				<view v-for="(item,index) in list" :key="index" @click="qiehuan(index)" :class="[goods_id == item.goods_id?'li clearfix active':'li clearfix']">
					<view class="left fl">
						<image :src="item.sitepicture"></image>
					</view>
					<view class="right fl">
						<view class="name">{{item.name}}</view>
						<view class="shuliang">缺货数量：{{item.qhsum}}</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				暂无数据
			</view>
		</view>
		<view class="goods">
			<view class="biaoti">缺货房间</view>
			<view class="roomlist" v-if="roomlist.length != 0">
				<view class="li fl" v-for="(item,index) in roomlist" :key="index">
					<view class="top">
						<view class="name">房间号：{{item.roomno}}</view>
						<view class="desc">名称：{{item.charger_name}}</view>
						<view class="shuliang">设备号：{{item.charger_number}}</view>
					</view>
					<view class="bottom">
						<text>{{index+1}}</text>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				station_id: '',
				info: {
					name: '',
					charger_bussiness_name: '',
					chargercount: 0,
					goodscount: 0,
				},
				list: [],
				roomlist: [],
				goods_id: '',
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.station_id = options.stationid;
			
			//门店详情
			this.request({
				url: '/xcx/stationdetail',
				data: {
					station_id: this.station_id
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.info = res.data.data;
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			})
			
			// 缺货商品
			this.request({
				url: '/xcx/stationgoods',
				data: {
					station_id: this.station_id
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data != null){
						this.list = res.data.data;
						
						if(this.list.length != 0){
							this.goods_id = this.list[0].goods_id;
							
							this.getRoomlist(this.list[0].goods_id);
						}
					}
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			})
		},
		methods: {
			qiehuan(index){
				this.goods_id = this.list[index].goods_id;
				
				this.getRoomlist(this.goods_id);
			},
			getRoomlist(goods_id){
				this.request({
					url: '/xcx/stationroom',
					data: {
						goods_id: goods_id
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.roomlist = res.data.data;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			fanhui(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.stock {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			position: relative;

			.con {
				width: 90%;
				position: absolute;
				left: 5%;
				bottom: 0;
				background: #e4effe;
				border: 4rpx solid #ffffff;
				border-top-right-radius: 60rpx;
				border-top-left-radius: 60rpx;
				padding: 30rpx 40rpx;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					font-weight: 700;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 26rpx;
				}

				.list {
					width: 100%;
					margin: 0 auto;

					.left {
						width: 50%;

						.zuo {
							margin-right: 10rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.you {
							width: 164rpx;
							text-align: center;

							.top {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;
								margin-bottom: 20rpx;
							}

							.bottom {
								font-size: 32rpx;
								color: #333333;
								font-weight: 700;
							}
						}
					}

					.right {
						width: 50%;

						.zuo {
							margin-right: 10rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.you {
							width: 220rpx;
							text-align: center;

							.top {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;
								margin-bottom: 20rpx;
							}

							.bottom {
								font-size: 32rpx;
								color: #333333;
								font-weight: 700;
							}
						}
					}
				}
			}
		}

		.goods {
			width: 90%;
			margin: 0 auto;
			margin-top: 40rpx;

			.biaoti {
				font-size: 36rpx;
				color: #333333;
				font-weight: 700;
				margin-bottom: 30rpx;
			}

			.goodslist {
				width: 100%;

				.li {
					width: 100%;
					box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.18);
					border-radius: 16rpx;
					margin-bottom: 30rpx;

					.left {
						width: 140rpx;
						height: 140rpx;
						border-radius: 12rpx;
						background: #F5F5F5;

						image {
							width: 80rpx;
							height: 80rpx;
							display: flex;
							margin: 30rpx;
						}
					}

					.right {
						margin-left: 30rpx;
						width: 460rpx;

						.name {
							margin-top: 24rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: #333333;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.shuliang {
							font-size: 24rpx;
							color: #333333;
							margin-top: 20rpx;
						}
					}
				}
				
				.li:last-child{
					margin-bottom: 0;
				}
				
				.active{
					box-shadow: 0 0 5px 1px rgba(26, 129, 255, 1);
				}
			}
			
			.roomlist{
				width: 100%;
				
				.li{
					width: 324rpx;
					margin-right: 20rpx;
					box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.18);
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					
					.top{
						width: 100%;
						padding: 20rpx 0 0 20rpx;
						box-sizing: border-box;
						
						.name{
							font-size: 28rpx;
							color: #333333;
							font-weight: 700;
							margin-bottom: 14rpx;
						}
						
						.desc{
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 14rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						
						.shuliang{
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 22rpx;
						}
					}
					
					.bottom{
						width: 100%;
						height: 54rpx;
						line-height: 52rpx;
						background: #DCECFF;
						border-bottom-left-radius: 16rpx;
						border-bottom-right-radius: 16rpx;
						position: relative;
						
						text{
							display: block;
							width: 36rpx;
							height: 36rpx;
							text-align: center;
							line-height: 36rpx;
							background: #1A81FF;
							border-radius: 50%;
							font-size: 24rpx;
							color: #FFFFFF;
							position: absolute;
							right: 20rpx;
							bottom: 10rpx;
						}
					}
				}
				
				.li:nth-of-type(2n){
					margin-right: 0;
				}
			}
			
			.empty{
				width: 100%;
				margin: 80rpx auto;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
</style>